<template>
  <div class="efficiency">
    <h1>效率报表</h1>
    <el-card class="box-card">
      <div class="fl main" ref="main"></div>
      <div class="fr derive">
        <el-button @click="exportExcel" type="primary">导出报表</el-button>
      </div>
      <el-table ref="table" :data="tableData" border style="width: 100%; margin-top: 20px">
        <el-table-column prop="name" label="名称" width="120">
        </el-table-column>
        <el-table-column prop="amount1" label="1"> </el-table-column>
        <el-table-column prop="amount2" label="2"> </el-table-column>
        <el-table-column prop="amount3" label="3"> </el-table-column>
        <el-table-column prop="amount4" label="4"> </el-table-column>
        <el-table-column prop="amount5" label="5"> </el-table-column>
        <el-table-column prop="amount6" label="6"> </el-table-column>
        <el-table-column prop="amount7" label="7"> </el-table-column>
        <el-table-column prop="amount8" label="8"> </el-table-column>
        <el-table-column prop="amount9" label="9"> </el-table-column>
        <el-table-column prop="amount10" label="10"> </el-table-column>
        <el-table-column prop="amount11" label="11"> </el-table-column>
        <el-table-column prop="amount12" label="12"> </el-table-column>
        <el-table-column prop="amount13" label="13"> </el-table-column>
        <el-table-column prop="amount14" label="14"> </el-table-column>
        <el-table-column prop="amount15" label="15"> </el-table-column>
        <el-table-column prop="amount16" label="16"> </el-table-column>
        <el-table-column prop="amount17" label="17"> </el-table-column>
        <el-table-column prop="amount18" label="18"> </el-table-column>
      </el-table>
      
    </el-card>
  </div>
</template>

<script>
// 导出表格

import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  data() {
    return {
      option: {
        title: {
          text: "效率报表",
          x: "center",
          y: 0,
          textStyle: {
            color: "#4f88ff",
            fontSize: 22,
            fontWeight: "normal",
          },
        },
        // 工具栏
        	toolbox: {
					feature: {
						dataView: {show: true, readOnly: false},
						magicType: {show: true, type: ['line', 'bar']},
						restore: {show: true},
						saveAsImage: {show: true}
					}
				},
        tooltip: {
          trigger: "item",
          formatter: "{a}<br/>产量:{c}",
        },
        legend: {
          data: ["A班产量", "B班产量", "合计R-SPM"],
          textStyle: {
            color: "#B4B4B4",
          },
          top: "5%",
        },
        xAxis: {
          show: true,
          type: "category",
          data: [
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7",
            "8",
            "9",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
          ],
        },
        yAxis: {
          show: true,
          type: "value",
        },
        series: [
          {
            name: "A班产量",
            data: [
              4500,
              7000,
              5200,
              4000,
              3600,
              4300,
              3900,
              5200,
              4900,
              4500,
              4800,
              5200,
              4000,
              3600,
              4300,
              3900,
              1200,
              4900,
            ],
            barWidth: 25,
            type: "bar",
            itemStyle: {
              normal: {
                color: "rgb(180, 199, 231)",
              },
            },

            stack: "产量",
          },
          {
            name: "B班产量",
            data: [
              4500,
              5000,
              5200,
              4000,
              3600,
              4300,
              3900,
              5200,
              4900,
              4500,
              4800,
              5200,
              4000,
              3600,
              4300,
              3900,
              5200,
              4900,
            ],
            type: "bar",
            stack: "产量",
            
            itemStyle: {
              normal: {
                color: "rgb(255, 230, 153)",
              },
            },
          },
          {
            name: "合计R-SPM",
            type: "line",
            // smooth: true, //是否平滑
            showAllSymbol: true,
            symbolSize: 15,
            symbol: "circle",
            lineStyle: {
              normal: {
                color: "#6c50f3",
                shadowColor: "rgba(0, 0, 0, .3)",
                shadowBlur: 0,
                shadowOffsetY: 5,
                shadowOffsetX: 5,
              },
            },

            itemStyle: {
              color: "#ffff00",
              borderColor: "#fff",
              borderWidth: 3,
              shadowColor: "rgba(0, 0, 0, .3)",
              shadowBlur: 0,
              shadowOffsetY: 2,
              shadowOffsetX: 2,
            },
            label: {
              formatter: (c) => {
                return "R-SPM:" + c.value / 1000;
              },
              show: true,
              position: ["-10", "-15"],
              color: "#000",
              fontSize: 12,
            },
            data: [
              8300,
              8000,
              8700,
              6900,
              6000,
              7300,
              7000,
              8700,
              8400,
              7500,
              8000,
              8700,
              6700,
              6000,
              7600,
              7600,
              7600,
              8200,
            ],
          },
        ],
      },
      tableData: [
        {
          id: "12987122",
          name: "A班产量",
          amount1: 4500,
          amount2: 3800,
          amount3: 5200,
          amount4: 4000,
          amount5: 3600,
          amount6: 4300,
          amount7: 3900,
          amount8: 5200,
          amount9: 5200,
          amount10: 4500,
          amount11: 4500,
          amount12: 4500,
          amount13: 4500,
          amount14: 4500,
          amount15: 4500,
          amount16: 4500,
          amount17: 4500,
          amount18: 4500,
        },
        {
          id: "12987123",
          name: "A班负荷时间",
          amount1: 600,
          amount2: 480,
          amount3: 600,
          amount4: 560,
          amount5: 600,
          amount6: 600,
          amount7: 520,
          amount8: 600,
          amount9: 600,
          amount10: 590,
          amount11: 600,
          amount12: 600,
          amount13: 600,
          amount14: 590,
          amount15: 600,
          amount16: 600,
          amount17: 430,
          amount18: 600,
        },
        {
          id: "12987124",
          name: "A班R-SPM",
          amount1: 7.5,
          amount2: 7.9,
          amount3: 8.7,
          amount4: 7.1,
          amount5: 6.0,
          amount6: 7.2,
          amount7: 7.5,
          amount8: 8.7,
          amount9: 8.7,
          amount10: 8.3,
          amount11: 7.5,
          amount12: 8.0,
          amount13: 8.7,
          amount14: 6.8,
          amount15: 6.0,
          amount16: 7.2,
          amount17: 9.1,
          amount18: 5.0,
        },
        {
          id: "12987125",
          name: "B班产量",
          amount1: 4500,
          amount2: 3800,
          amount3: 5200,
          amount4: 4000,
          amount5: 3600,
          amount6: 4300,
          amount7: 3900,
          amount8: 5200,
          amount9: 5200,
          amount10: 4500,
          amount11: 4500,
          amount12: 4500,
          amount13: 4500,
          amount14: 4500,
          amount15: 4500,
          amount16: 4500,
          amount17: 4500,
          amount18: 4500,
        },
        {
          id: "12987126",
          name: "B班负荷时间",
          amount1: 600,
          amount2: 480,
          amount3: 600,
          amount4: 560,
          amount5: 600,
          amount6: 600,
          amount7: 520,
          amount8: 600,
          amount9: 600,
          amount10: 590,
          amount11: 600,
          amount12: 600,
          amount13: 600,
          amount14: 590,
          amount15: 600,
          amount16: 600,
          amount17: 430,
          amount18: 600,
        },
        {
          id: "12987127",
          name: "B班R-SPM",
          amount1: 7.5,
          amount2: 7.9,
          amount3: 8.7,
          amount4: 7.1,
          amount5: 6.0,
          amount6: 7.2,
          amount7: 7.5,
          amount8: 8.7,
          amount9: 8.7,
          amount10: 8.3,
          amount11: 7.5,
          amount12: 8.0,
          amount13: 8.7,
          amount14: 6.8,
          amount15: 6.0,
          amount16: 7.2,
          amount17: 9.1,
          amount18: 5.0,
        },

        {
          id: "12987128",
          name: "R-SPM目标值",
          amount1: 7.5,
          amount2: 7.9,
          amount3: 8.7,
          amount4: 7.1,
          amount5: 6.0,
          amount6: 7.2,
          amount7: 7.5,
          amount8: 8.7,
          amount9: 8.7,
          amount10: 8.3,
          amount11: 7.5,
          amount12: 8.0,
          amount13: 8.7,
          amount14: 6.8,
          amount15: 6.0,
          amount16: 7.2,
          amount17: 9.1,
          amount18: 5.0,
        },

        {
          id: "12987129",
          name: "R-SPM挑战值",
          amount1: 10,
          amount2: 10,
          amount3: 10,
          amount4: 10,
          amount5: 10,
          amount6: 10,
          amount7: 10,
          amount8: 10,
          amount9: 10,
          amount10: 10,
          amount11: 10,
          amount12: 10,
          amount13: 10,
          amount14: 10,
          amount15: 10,
          amount16: 10,
          amount17: 10,
          amount18: 10,
        },

        {
          id: "12987130",
          name: "合计R-SPM",
          amount1: 7.5,
          amount2: 7.9,
          amount3: 8.7,
          amount4: 7.1,
          amount5: 6.0,
          amount6: 7.2,
          amount7: 7.5,
          amount8: 8.7,
          amount9: 8.7,
          amount10: 8.3,
          amount11: 7.5,
          amount12: 8.0,
          amount13: 8.7,
          amount14: 6.8,
          amount15: 6.0,
          amount16: 7.2,
          amount17: 9.1,
          amount18: 5.0,
        },
      ],
    };
  },
  mounted() {
    this.Efficient();
  },
  methods: {
    Efficient() {
      //   效率情况
      let main = this.$echarts.init(this.$refs.main);
      main.setOption(this.option);
    },
    // 导出报表
    exportExcel() {
      console.log(this.$refs.table.$el);
      var xlsxParam = { raw: true }; // 导出的内容只做解析，不进行格式转换(添加此行代码表格中的百分比就不会再导出的时候被转换成小数点)
      let wb = XLSX.utils.table_to_book(this.$refs.table.$el, xlsxParam);
      let wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      // 获取当前的时间戳，用来当文件名
      let time = "效率报表";
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          `${time}.xlsx`
        ); //${time}是自己导出文件时的命名，随意
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../../assets/css/efficiency.less";
</style>
